<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 50px">
            升级包创建
            <span
                style="color: #000; font-size: 15px; margin-left: 20px"
            ></span>
            <span style="float: right">
                <el-button type="primary" plain size="small" @click="save"
                    >确认保存</el-button
                >
                <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="$emit('save')"
                    >返回</el-button
                >
            </span>
        </div>
        <!-- 表单主体 -->
        <div class="report-table-form1">
            <el-form
                style="width: 750px"
                @submit.native.prevent
                ref="form"
                :model="form"
                :rules="rules"
                size="small"
                label-width="150px"
            >
                <el-form-item label="设备类型：" prop="terminalType">
                    <el-select
                        class="items"
                        v-model="form.terminalType"
                        filterable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="(item, index) in terminalTypeList"
                            :key="index"
                            :label="item.terminalTypeName"
                            :value="item.terminalType"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="升级包类型：" prop="packageType">
                    <el-select
                        class="items"
                        v-model="form.packageType"
                        filterable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="(item, index) in typeList"
                            :key="index"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="升级模式：" prop="upgradeModel">
                    <el-select
                        class="items"
                        v-model="form.upgradeModel"
                        filterable
                        clearable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in upgradeModelList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否直接上架：" prop="directGrounding">
                    <el-select
                        class="items"
                        v-model="form.directGrounding"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in yesOrNoList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否强制升级：" prop="forceUpgrade">
                    <el-select
                        class="items"
                        v-model="form.forceUpgrade"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in yesOrNoList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="升级包名称：" prop="packageName">
                    <el-input
                        placeholder="升级包名称，包括后缀名"
                        size="small"
                        v-model="form.packageName"
                    ></el-input>
                </el-form-item>
                <el-form-item label="升级包：" prop="packageUrl">
                    <div style="width: 100%" class="column left">
                        <el-upload
                            class="upload-demo"
                            action
                            :on-remove="handleRemove"
                            :limit="1"
                            ref="upload"
                            :http-request="fnUploadRequest"
                            :file-list="fileList"
                        >
                            <el-button
                                @click="$refs.upload.clearFiles()"
                                size="small"
                                type="primary"
                                >点击上传升级包</el-button
                            >
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="升级包 URL：" prop="pageckUrl">
                    <el-input
                        size="small"
                        disabled
                        placeholder="上传后自动生成"
                        v-model="form.packageUrl"
                    ></el-input>
                </el-form-item>
                <el-form-item label="升级包大小(Mb)：" prop="packageSize">
                    <el-input
                        disabled
                        size="small"
                        placeholder="上传后自动生成"
                        v-model="form.packageSize"
                    ></el-input>
                </el-form-item>
                <el-form-item label="升级包版本号：" prop="packageVersionCode">
                    <el-input
                        size="small"
                        placeholder="给用户查看用的版本信息"
                        v-model="form.packageVersionCode"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="内部版本号："
                    prop="internalPackageVersionCode"
                >
                    <el-input
                        size="small"
                        placeholder="锋云和网关为6位数字，机顶盒类似V1.6.0，非常重要，务必认真填写（管理系统除外)"
                        v-model="form.internalPackageVersionCode"
                    ></el-input>
                </el-form-item>
                <el-form-item label="升级包摘要：" prop="digest">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="升级包摘要信息"
                        v-model="form.digest"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="升级包内部描述："
                    prop="internalDescription"
                >
                    <tinymce-editor
                        ref="editor"
                        v-model="form.internalDescription"
                    ></tinymce-editor>
                </el-form-item>
                <el-form-item
                    label="升级包外部描述："
                    prop="externalDescription"
                >
                    <tinymce-editor
                        ref="editor"
                        v-model="form.externalDescription"
                    ></tinymce-editor>
                </el-form-item>
                <el-form-item>
                    <div class="center">
                        <el-button
                            type="primary"
                            size="small"
                            @click="save"
                            >确认保存</el-button
                        >
                        <el-button
                            type="danger"
                            plain
                            size="small"
                            @click="$emit('save')"
                            >返回</el-button
                        >
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import OSS from 'ali-oss'
import TinymceEditor from '@/common/Tinymce'
export default {
    props: {
        row: Object
    },
    components: {
        TinymceEditor
    },
    data: function () {
        return {
            yesOrNoList: [
                { name: '是', value: 1 },
                { name: '否', value: 0 }
            ],
            upgradeModelList: [
                { name: '设备模式', value: 1 },
                { name: '场所模式', value: 0 }
            ],
            terminalTypeList: [],
            typeList: [],
            fileList: [],
            form: {
                upgradePackageID: '',
                packageFileName: '',
                terminalType: '',
                packageType: null,
                upgradeModel: '',
                directGrounding: '',
                forceUpgrade: '',
                packageName: '',
                packageUrl: '',
                packageSize: '',
                packageVersionCode: '',
                internalPackageVersionCode: '',
                digest: '',
                internalDescription: '',
                externalDescription: ''
            },
            rules: {
                terminalType: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                packageType: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                upgradeModel: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                directGrounding: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                forceUpgrade: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                packageName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                packageUrl: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                packageSize: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                packageVersionCode: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                internalPackageVersionCode: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                digest: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                internalDescription: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                externalDescription: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            agentList: []
        }
    },
    mounted () {
    },
    created () {
        console.log(this.row, 'sdadad')
        this.getOnlyTerminalType()
        this.packageTypeList()
        if (this.row.upgradePackageID) {
            this.form = this.copyArr(this.row)
            this.form.directGrounding = this.row.directGrounding || 0
        }
    },
    methods: {
        getOnlyTerminalType () {
            this.$http.get(this.$store.state.IP + '/system/company/getOnlyTerminalType?isAll=1', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.terminalTypeList = response.data
                }
            }, response => {
            })
        },
        packageTypeList () {
            this.$http.get(this.$store.state.IP + '/upgradeManage/packageTypeList', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.typeList = response.res
                }
            }, response => {
            })
        },
        handleRemove (file) {
            console.log(file)
            this.form.packageUrl = ''
            this.form.packageFileName = ''
            this.fileList = []
        },
        async getOssParms () {
            console.log()
            let params = {
                params: {}
            }
            let ret = await this.$http
                .get(
                    this.$store.state.IP +
                    '/oss/getAuthorizationInfo?path=skinPackage',
                    params
                )
            return ret.body.data
        },
        async fnUploadRequest (option) {
            console.log(option)
            try {
                let vm = this
                // 获取OSS配置信息
                let val = await vm.getOssParms()
                let filename = val.path + '/' + Date.parse(new Date()) + '.zip'
                let client = new OSS({
                    region: val.region,
                    accessKeyId: val.accessKeyId,
                    accessKeySecret: val.accessKeySecret,
                    secure: false,
                    bucket: val.bucket,
                    stsToken: val.securityToken
                })
                let file = option.file
                // 分片上传文件
                let ret = await client.multipartUpload(filename, file, {
                    progress: async function (p) {
                        let e = {}
                        e.percent = p * 100
                        option.onProgress(e)
                    }
                })
                if (ret.res.statusCode === 200) {
                    let indexID = ret.res.requestUrls[0].indexOf('?uploadId')
                    if (indexID !== -1) {
                        ret.res.requestUrls[0] = ret.res.requestUrls[0].substring(0, indexID)
                    }
                    console.log(ret.res.requestUrls[0])
                    vm.form.packageUrl = ret.res.requestUrls[0]
                    vm.form.packageFileName = option.file.name
                    vm.form.packageSize = (option.file.size / 1024 / 1024).toFixed(2)
                    option.onSuccess(ret)
                    // return ret
                } else {
                    option.onError('上传失败')
                }
            } catch (error) {
                console.error(error)
                this.disabled = false
                option.onError('上传失败')
                this.$error(error.message)
            }
        },
        // 保存表单
        save () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$http.post(this.$store.state.IP + '/upgradeManage/addOrEditUpgrade', {
                        ...this.form
                    },
                        {
                            'emulateJSON': false
                        }
                    ).then(response => {
                        console.log('-------------------------------------------')
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.$emit('save')
                            this.loading = false
                        } else {
                            this.loading = false
                        }
                    }, response => {
                        this.loading = false
                        console.log('通讯失败')
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.avatar-uploader .el-upload
    border: 1px dashed #d9d9d9
    border-radius: 6px
    cursor: pointer
    position: relative
    overflow: hidden

.avatar-uploader .el-upload:hover
    border-color: #409EFF

.avatar-uploader-icon
    font-size: 28px
    color: #8c939d
    width: 178px
    height: 178px
    line-height: 178px
    text-align: center

.avatar
    width: 178px
    height: 178px
    display: block

.report-table-form1
    width: 100%
    min-height: 40px
    padding: 50px 20px
    box-sizing: border-box
    background: #fff
    overflow: hidden
    display: flex
    justify-content: center

.report-table-top-title
    width: 100%
    height: 64px
    line-height: 64px
    color: #000
    font-size: 18px

.order-report-agent
    width: 100%
    background: #f1f0f5

    .el-transfer__button:first-child
        display: none

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff

.items
    width: 100%

.center
    text-align: center

.flex
    display: flex
    align-items: center
</style>
